export default class Food {
  //本作的食物比较简单没有什么特殊的属性
  //必存的属性 是食物所对应的元素
  element: HTMLElement;
  constructor() {
    //获取页面中的元素并将它赋值给element
    this.element = document.getElementById("food")!; //加一个叹号表示这个元素不可能为空 非空断言操作符
    
  }
  //食物需要哪些方法
  //获取食物的坐标
  //x轴坐标
  get X() {
    return this.element.offsetLeft; //
    /**
     * offsetLeft 是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
     *
     * 返回值包含:
     *
     * 元素向左偏移的像素值，元素的外边距（margin）
     * offsetParent 元素的左侧内边距（padding）、边框（border）及滚动条
     * 注意: offsetParent 元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素。
     */
  }
  //Y轴坐标
  get Y() {
    return this.element.offsetTop;
  }

  //修改食物位置的方法
  change() {
    //生成随机位置   根据页面上的 盒子  确定 x , y 的值只能在 [0-290] 29怎么来的考虑可扩展性的话29应该拿舞台的宽度来减去食物的大小
    //且蛇是每次移动10px 难么取值只能是 10的整倍数
    //拿以前的生成随机数的方法
    let x =
      10 *
      (Math.floor(Math.random() * (Math.floor(29) - Math.ceil(0) + 1)) +
        Math.ceil(0));
    let y =
      10 *
      (Math.floor(Math.random() * (Math.floor(29) - Math.ceil(0) + 1)) +
        Math.ceil(0));
    this.element.style.left = `${x}px`;
    this.element.style.top = `${y}px`;
  }
}
//生成[min,max]中间的随机 整数
function getRandomIntInclusive(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
